import React from "react";
import { View, Text } from "react-native";
import styles from "./contact.style";
import FriendList from "@/components/Friend/FriendList";
import GroupChatList from "@/components/GroupChat/GroupChatList";
import { useTheme } from "@/contexts/ThemeContext";
import { useFriendsState } from "@/hooks/Friend/friend";

const ContactScreen = () => {
  const { colors } = useTheme();
  const { friends } = useFriendsState();

  // 好友列表标题组件
  const FriendListHeader = () => (
    <View
      style={{
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        paddingVertical: 12,
        paddingHorizontal: 16,
        borderBottomWidth: 0.5,
        borderBottomColor: colors.border.divider,
        backgroundColor: colors.backgroundLight,
      }}
    >
      <View style={{ flexDirection: "row", alignItems: "center" }}>
        <Text
          style={{
            fontSize: 15,
            fontWeight: "600",
            color: colors.text.primary,
          }}
        >
          我的好友
        </Text>
        <Text
          style={{ fontSize: 14, marginLeft: 6, color: colors.text.secondary }}
        >
          {friends ? friends.length : 0}
        </Text>
      </View>
    </View>
  );

  return (
    <View style={[styles.container, { backgroundColor: colors.background }]}>
      <GroupChatList />
      <View style={{ height: 10, backgroundColor: colors.backgroundLight }} />
      <FriendListHeader />
      <FriendList />
    </View>
  );
};

export default ContactScreen;
